<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <!--<link rel="stylesheet" href="css/iview.min.css">-->
    <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> -->
    <!-- This page CSS -->
    <!-- chartist CSS -->
    <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
    <!--c3 CSS -->
    <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
    <!--Toaster Popup message CSS -->
    <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
    <!-- Custom CSS -->
    <link href="css/style.min.css" rel="stylesheet">
    <!-- Dashboard 1 Page CSS -->
    <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
    <!-- You can change the theme colors from here -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">

    <!-- page css -->
    <link href="css/pages/user-card.css" rel="stylesheet">
    <!-- Popup CSS -->
    <!-- <link href="../assets/node_modules/Magnific-Popup-master/dist/magnific-popup.css" rel="stylesheet"> -->

    <link rel="stylesheet" href="css/diy.min.css">
    <!--<link href="../assets/node_modules/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"
                                            href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
                    <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"
                                            href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
                </ul>
                <user-head></user-head>
            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="5"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">商品管理</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item active">企业管理</li>
                        <li class="breadcrumb-item active">
                            <a href="/main/prodControl.html">
                                商品管理
                            </a>
                        </li>
                        <li class="breadcrumb-item active">商品详情</li>
                    </ol>
                </div>
            </div>

            <div class="bgfff p-l-29 p-r-31 p-b-49">
                <div class="p-t-28 p-b-38 bbef0">
                    <span class="p-r-35">商品分类</span>
                    <span class="cblue">{{goodsTypeName}}</span>
                </div>

                <div class="p-t-28 p-b-44">
                    <span class="p-r-35">商品标题 </span>
                    <span class="c26">{{goodsName}}</span>
                </div>

                <div class="p-b-44">
                    <span class="p-r-35">商品类型 </span>
                    <span class="c26">{{goodsTypeName}}</span>
                </div>

                <div class="p-b-44">
                    <span class="p-r-35">商品总库存</span>
                    <span class="c26">{{goodsNum}}</span>
                </div>

                <div class="p-b-41">
                    <span class="p-r-35">商品价格  </span>
                    <span class="text-danger">￥{{price}}～￥{{maxPrice}}</span>
                </div>

                <div class="p-b-41 d-flex align-items-start">
                  <span class="p-r-35">商品类型</span>
                  <div class="d-flex">
                    <div :class="{'ml-5': index !== 0}"  class="d-flex justify-content-between" v-for="(item, index) in goodsSpec" :key="index">
                      <h5>{{index | types}}<h5/>
                      <div class="ml-3">
                        <div class="d-flex align-items-center">
                          <span style="color: #999999">商品类型：</span>
                          <span class="text-body">{{item.typeName}}</span>
                        </div>
                        <div class="d-flex align-items-center mt-3">
                          <span style="color: #999999">商品规格：</span>
                          <span class="text-body">{{item.spec}}</span>
                        </div>
                        <div class="d-flex align-items-center mt-3">
                          <span style="color: #999999">商品库存：</span>
                          <span class="text-body">{{item.total}}</span>
                        </div>
                        <div class="d-flex align-items-center mt-3">
                          <span style="color: #999999">商品价格：</span>
                          <span class="text-body">{{item.price}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--图片-->
                <div class="d-flex bbef0 p-b-42">
                    <span class="has-danger p-r-25">商品图片</span>

                    <div class="d-flex lh120 el-element-overlay">
                        <div class="w120 h120 bradius4 textc bced m-r-20 el-card-item"
                             v-for="(v,k) in prod_imgs" :key="k">

                            <div class="el-card-avatar el-overlay-1 w100p h100p">
                                <a class="image-popup-vertical-fit w100p h100p d-block goods-img"
                                   :style="'background-image: url('+v+')'"
                                   :href="v.src">
<!--                                    <img :src="v" alt="" class="w100p h100p position-absolute left0 top0 bradius4">-->
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <p class="p-t-29">商品详情</p>
                </div>

                <!--操作-->
                <div class="d-flex lh40">
                    <span class="bgblue cfff hoverfff w85 textc h40 bradius4 m-r-20" >发布</span>
                    <span class="bblue cblue hoverfff w85 textc h40 bradius4" @click="preview_show=true">预览</span>
                </div>

            </div>

        </div>

    </div>
    <prev-goods :is-show="preview_show"
                :prod_imgs="prod_imgs"
                :prod-size="prodSize"
                :edit_html="edit_html"
                :goods-name="goodsName"
                :is-format-money="true"
                @close="preview_show=false"
    >

    </prev-goods>
</div>
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap popper Core JavaScript -->
<!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
<script src="js/bootstrap.min.js"></script>
<!--<script src="js/iview.min.js"></script>-->
<!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
<!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
<!-- slimscrollbar scrollbar JavaScript -->
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<!--Wave Effects -->
<!-- <script src="js/waves.js"></script> -->
<!--Menu sidebar -->
<script src="js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
<!--c3 JavaScript -->
<!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
<!-- Popup message jquery -->
<!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
<!-- Chart JS -->
<!--<script src="js/dashboard1.js"></script>-->
<!-- ============================================================== -->
<!-- Magnific popup JavaScript -->
<!-- <script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
<script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup-init.js"></script> -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
<script src="js/layer/layer.js"></script>
<!--<script src="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../assets/node_modules/bootstrap-table/dist/bootstrap-table.ints.js"></script>-->
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<!--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->

<!--<script src="js/headers.js"></script>-->
<!--<script src="js/Aside.js"></script>-->

<script>
    $(function () {
        window.vw = new Vue({
            el: '#main-wrapper',
            // components:{header},
            data: {
                username: '用户昵称',
                search_key: '',//搜索关键字
                prod_imgs:[],
                prodSize: [],
                edit_html: '',
                goodsId:0,
                goodsTypeName:'',
                goodsName:'',
                goodsNum:'',
                price:'',
                preview_show: false,
                goodsSpec: [],
                maxPrice: ''
            },
            mounted() {
                var params = $.formatParams(location.href);
                this.goodsId = params.id;
                this.loadDataList();
            },
            filters: {
              types(value) {
                let temp = {1: '类型一', 2: '类型二', 3: '类型三', 4: '类型四', 5: '类型五', 6: '类型六', 7: '类型七', 8: '类型八', 9: '类型九'}
                return temp[value + 1]
              }
            },
            methods: {
                search() {//搜索
                    console.log(this.search_key)
                },
                loadDataList() {//加载商品详情
                    var _this = this;
                    $.cAjax('/crmPc/companyGoods/getGoodsInfoPC', {
                        data: {
                            goodsId: this.goodsId,
                        }
                    }).then(function (data) {
                      // data第一层为类型 第二层为规格
                        if (data) {
                            var pageInfo = JSON.parse(data.pageInfo).list[0];
                            _this.goodsSpec = pageInfo.goodSpecModelList.map((item,index) => {
                              let temp = item.goodSpecModelList.map(row => {
                                return {
                                  spec: row.specAttribute,
                                  total: row.specNum,
                                  price: (row.price / 100).toFixed(2)
                                }
                              })
                              return Object.assign(...temp, {typeName: item.specName})
                            })
                            console.log(pageInfo)
                            _this.goodsTypeName = pageInfo.goodsTypeName,
                            _this.goodsName = pageInfo.goodsName,
                            _this.goodsNum = pageInfo.goodsNum,
                            _this.price = pageInfo.price ? (pageInfo.price / 100).toFixed(2) : 0.00,
                            _this.prod_imgs = pageInfo.goodPhoto ? pageInfo.goodPhoto.split(',') : [];
                            _this.prodSize = pageInfo.goodSpecModelList;
                            _this.edit_html = pageInfo.goodsDetails;
                            _this.maxPrice = (pageInfo.maxPrice / 100).toFixed(2) || ''
                            console.log(_this.prod_imgs);
                        }
                    }).catch(function (err) {

                    });
                },
            }

        })
    })
</script>

</body>

</html>

